<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jquey 事件移入移出监听</title>
</head>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
  $(function(){
      // $('.father').mouseover(function(){
      //   console.log('鼠标移入事件');
      // });
      // $('.father').mouseout(function () {
      //    console.log('鼠标移出事件');
      // });
       
      // $('.father').mouseenter(function () {
      // console.log('鼠标移入事件');
      // });
      // $('.father').mouseleave(function () {
      //   console.log('鼠标移出事件');
      // });

       $('.father').hover(function(){
         console.log('鼠标移入事件');
       },function(){
         console.log('鼠标移出事件');
       });
      
  });
</script>
<style>
.father{
  height: 500px;
  width: 500px;
  background-color: rgb(211, 49, 49);
}
</style>
<body>
  <div class="father"></div>
</body>
</html>